<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>{{ $route.query.status.toString() === "0" ? "处理" : "查看" }}</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="task-detail-header">
            <div class="title">
                <p class="name">
                    {{ $route.query.name }}
                    <span :class="{ finish: $route.query.status === '1' }">{{ $route.query.status === "1" ? "已处理" : "未处理" }}</span>
                </p>
                <el-tooltip
                    v-if="Number($route.query.descriptionType) === 1"
                    effect="dark"
                    :content="$route.query.description"
                    :disabled="!$route.query.description"
                    placement="top"
                >
                    <p class="description">
                        {{ $route.query.description || "暂无描述" }}
                    </p>
                </el-tooltip>
                <p
                    class="btn"
                    v-if="Number($route.query.descriptionType) === 2"
                    @click="showRichText"
                >
                    查看表单介绍
                </p>
            </div>
            <div>
                <el-button v-if="$route.query.status === '0'" class="pbb__search-btn" type="primary" @click="markFinish">标记已处理</el-button>
                <el-button class="pbb__search-btn" @click="goBack">返回</el-button>
            </div>
        </div>
        <el-table
            v-show="tableData.length"
            :data="tableData"
            class="pbb__table"
            header-cell-class-name="pbb__table-thead"
            cell-class-name="pbb__table-thead-cell"
            row-class-name="pbb__table-thead-row"
            style="width: 100%;height: calc(100% - 100px);overflow-y: auto;"
        >
            <el-table-column
                type="index"
                width="60"
                label="序号">
            </el-table-column>
            <el-table-column
                prop="name"
                label="表单项名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="valueKindId"
                label="类型">
                <template slot-scope="scope">
                    {{ scope.row.valueKindId | getType }}
                </template>
            </el-table-column>
            <el-table-column
                prop="optionList"
                label="选项">
                <template slot-scope="scope">
                    {{ getOptions(scope.row.optionList) }}
                </template>
            </el-table-column>
            <el-table-column
                prop="handleState" label="状态">
                <template slot-scope="scope">
                    <span :class="scope.row.handleState ? 'table-tips-success' : 'table-tips-error'">
                        {{ scope.row.handleState ? "已添加至公共表单项" : "未处理" }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="publicFormItem"
                label="对应公共表单项">
            </el-table-column>
            <el-table-column
                prop="reviewerName"
                label="操作人">
            </el-table-column>
            <el-table-column
                v-if="$route.query.status === '0'"
                label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleRow(scope.row)">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ask-empty-text
            style="min-height: 400px;"
            v-if="tableData.length === 0"
        >
        </ask-empty-text>
        <template v-slot:footer v-if="total > 0">
            <pagination
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="pageSize"
                @pagination="getTable"
            />
        </template>
        <el-dialog
            :title="title"
            :visible.sync="show"
            :close-on-click-modal="false"
            @close="_close"
            destroy-on-close
            width="640px"
            custom-class="match-dialog"
        >
            <div class="match-content" v-if="show">
                <div class="one" v-show="showItemMatch">
                    <el-button v-if="tenData.length" class="show-data-btn" :style="{left: 20 + title.length * 20 + 'px'}" type="text" @click="isShowData = !isShowData">查看表单项数据<i :class="isShowData ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i></el-button>
                    <div class="ten-data" v-show="isShowData">
                        <template v-for="(item, index) in tenData">
                            <div :key="index" class="ten-data-item" v-if="item.extData || item.itemValue">
                                <div v-if="item.valueKindId === 4" class="address-text">
                                    {{ item.extData ? item.extData.cityName : "" }}
                                    {{ item.extData && item.extData.cityAddress ? "-" + item.extData.cityAddress : "" }}
                                </div>
                                <div v-else-if="item.valueKindId === 5">
                                    <div
                                        v-if="
                                            item.extData &&
                                                item.extData.path.length
                                        "
                                    >
                                        <img class="table-img" :src="$staticUrl + '/' + item.extData.path[0]" alt="" @click="previewImg(item.extData.path)"/>
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === 8">
                                    <div
                                        v-if="
                                            item.extData &&
                                                item.extData.path.length
                                        "
                                    >
                                        <video
                                            class="table-img"
                                            :src="
                                                $staticUrl +
                                                    '/' +
                                                    item.extData.path[0]
                                            "
                                            alt=""
                                            @click="
                                                previewVideo(item.extData.path)
                                            "
                                        ></video>
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === 9">
                                    <div
                                        v-if="
                                            item.extData &&
                                                item.extData.path.length
                                        "
                                    >
                                        <el-button
                                            type="text"
                                            @click="
                                                previewVideo(
                                                    item.extData.path,
                                                    'record'
                                                )
                                            "
                                            >播放</el-button
                                        >
                                    </div>
                                </div>
                                <div v-else-if="item.valueKindId === 10">
                                    <div
                                        v-if="
                                            item.extData &&
                                                item.extData.path.length
                                        "
                                    >
                                        <el-link
                                            class="table-file"
                                            v-for="(it, idx) in item.extData
                                                .path"
                                            :key="idx"
                                            type="primary"
                                            :href="$staticUrl + '/' + it"
                                            target="_blank"
                                        >
                                            文件{{ idx + 1 }}
                                        </el-link>
                                    </div>
                                </div>
                                <span v-else>{{ item.itemValue }}</span>
                            </div>
                        </template>
                    </div>
                    <div class="line" v-show="isShowData && tenData.length"></div>
                    <p class="tips">
                        可点击选择系统推荐表单项，并进入下一步。如无匹配公共表单项可
                        <el-link type="primary" @click="toAddOption">跳过此步骤直接添加</el-link>
                    </p>
                    <div class="content">
                        <div class="search">
                            <p>系统推荐匹配表单项</p>
                            <el-cascader
                                v-model="typeIds"
                                :options="typeList"
                                :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                                clearable
                                size="mini">
                            </el-cascader>
                            <el-input v-model="keyword" size="mini" @keyup.enter.native="searchOptions"></el-input>
                            <el-button @click="searchOptions" size="mini" style="margin-left: 10px;">搜索</el-button>
                        </div>
                        <el-table
                            class="pop-table"
                            ref="multipleTable"
                            :class="{ isSingle: [6, 7].includes(currentNode.valueKindId) }"
                            :data="systemOptionList"
                            tooltip-effect="dark"
                            max-height="300"
                            border
                            style="width: 100%"
                            @select-all="changeSelect"
                            @select="changeSelectRow">
                            <el-table-column
                                align="center"
                                type="selection"
                                width="60"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="valueKindId"
                                label="类型"
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{ scope.row.valueKindId | getType }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="secondType"
                                label="表单项二级分类"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                            <el-table-column
                                prop="thirdType"
                                label="表单项三级分类"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="表单项名称"
                                show-overflow-tooltip
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="selected-box" v-show="selectedList.length">
                        <p class="box-title">已选 （单选和多选类型只支持匹配一个公共表单项）</p>
                        <div class="select-border">
                            <badge-delete-box :list="selectedList" @deleteItem="deleteItem"/>
                        </div>
                    </div>
                </div>
                <div class="tow" v-show="showAddOption">
                    <add-option
                        ref="addOption"
                        :fillData="currentNode"
                        :editOption="!['6', '7'].includes(currentNode.valueKindId.toString())"
                    ></add-option>
                </div>
                <div class="tow" v-if="showOptionMath">
                    <option-match
                        ref="optionMath"
                        :fillData="currentNode"
                        :commonOption="selectedList[0]"
                    ></option-match>
                </div>
                <div class="btn-box">
                    <el-button @click="closeDialog">取消</el-button>
                    <el-button
                        v-show="showItemMatch"
                        :disabled="checkDisabled('next')"
                        @click="nextPre"
                        >下一步</el-button
                    >
                    <el-button v-show="!showItemMatch" @click="nextPre"
                        >上一步</el-button
                    >
                    <el-button
                        :disabled="checkDisabled('finish')"
                        type="primary"
                        @click="submitForm"
                        >完成</el-button
                    >
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="表单介绍详情"
            :visible.sync="dialogVisible"
            width="30%"
            class="rich-dialog"
        >
            <div>
                <p class="titleName">
                    <span>标题:</span>{{ $route.query.name }}
                </p>
                <div
                    v-html="$route.query.description || '暂无富文本'"
                    class="centent"
                ></div>
            </div>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="showTip"
            width="500px">
            <div class="tip-content">
                <p>当前审核的表单项类型为<span>{{ this.currentNode.valueKindId | getType }}</span></p>
                <div>
                    <p>您选择匹配的表单项</p>
                    <p v-for="item in differentItem" :key="item.id">
                        1.【{{ item.name }}】类型为<span>{{ item.valueKindId | getType }}</span>；
                    </p>
                </div>
                <p>是否依然进行匹配？</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="toSubmit()">是</el-button>
                <el-button type="primary" @click="showTip = false">否</el-button>
            </span>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import AddOption from "../components/add-option/index.vue";
import OptionMatch from "@/views/resource-manage/src/components/option-match/index.vue";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@/components/public/preview-video-audio/index";
import BadgeDeleteBox from "@/components/badge-delete-box/index.vue";

@Component({
    name: "ResourceAttrMatchNotAlive",
    components: {
        AddOption,
        OptionMatch,
        BadgeDeleteBox
    },
    filters: {
        getType(val: number) {
            const typeList = [
                { id: "1", value: "input-text", label: "单行文本" },
                { id: "2", value: "input-textarea", label: "多行文本" },
                { id: "3", value: "input-date", label: "日期" },
                { id: "11", value: "input-datetime", label: "日期时间" },
                { id: "4", value: "location", label: "定位" },
                { id: "6", value: "select", label: "单选" },
                { id: "7", value: "cascader", label: "多选" },
                { id: "12", value: "input-num", label: "整数" },
                { id: "13", value: "input-num-decimal", label: "小数" },
                { id: "5", value: "upload-img", label: "图片" },
                { id: "8", value: "upload-video", label: "视频" },
                { id: "9", value: "upload-record", label: "录音" },
                { id: "10", value: "upload-file", label: "文件" }
            ];
            const item = typeList.filter((item: any) => Number(item.id) === val);
            if (item.length) {
                return item[0].label;
            } else {
                return "";
            }
        }
    }
})
export default class ResourceAttrMatchNotAlive extends Vue {
    tableData: any[] = [];
    title = "表单项1";
    show = false;
    keyword = "";
    // 搜索公共表单项
    typeIds: any[] = [];
    systemOptionList: any[] = [];
    showItemMatch = true;
    isShowData = true;
    showAddOption = false;
    showOptionMath = false;
    dialogVisible = false;
    // 当前选中列表
    selectedList: any = [];
    pageIndex = 1;
    pageSize = 20;
    total = 0;
    untreated = 0;
    currentNode: any = {};
    tenData: any[] = [];
    typeList: any[] = [];
    showTip = false;
    differentItem: any[] = [];
    addItem: any = {}

    created() {
        this.getTable();
        this.getType();
    }

    getOptions(val: any) {
        return val ? val.map((item: any) => item.name).join() : "";
    }

    async getType() {
        const res = await this.$server["business/config/tree"]({
            data: {}
        });
        if (res.data.code === 200) {
            const filterList = (list: any) => {
                list.forEach((item: any) => {
                    if (item.children && item.children.length) {
                        item.children = filterList(item.children);
                    } else {
                        item.children = null;
                    }
                });
                return list;
            };
            this.typeList = filterList(res.data.data[0].children);
        }
    }

    // 查询表格
    async getTable() {
        const res = await this.$server["resource/formItemList"]({
            data: {
                formId: this.$route.query.id,
                currentPage: this.pageIndex,
                pageSize: this.pageSize
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.pageList.records;
            this.total = res.data.data.pageList.total;
            this.untreated = res.data.data.untreated;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 展示富文本
    showRichText() {
        this.dialogVisible = true;
    }

    // 处理
    handleRow(row: any) {
        this.currentNode = {
            ...row,
            optionList: row.optionList || []
        };
        this.show = true;
        this.title = row.name;
        this.keyword = row.name;
        this.searchOptions();
        this.searchTenData(row.id);
    }

    // 查询填报前十条
    async searchTenData(id: any) {
        const res = await this.$server["resource/formOptions/tenData"]({
            data: {
                itemId: id
            }
        });
        if (res.data.code === 200) {
            this.tenData = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    closeDialog() {
        this.show = false;
        this.showItemMatch = true;
        this.showAddOption = false;
        this.showOptionMath = false;
        this.title = "";
        this.keyword = "";
        this.selectedList = [];
    }

    // 上/下一步
    nextPre() {
        if (!this.showItemMatch) {
            // 上一步
            this.showItemMatch = true;
            this.showAddOption = false;
            this.showOptionMath = false;
        } else {
            // 下一步
            if (this.selectedList.length && ["6", "7"].includes(this.currentNode.valueKindId.toString())) {
                this.showItemMatch = false;
                this.showAddOption = false;
                this.showOptionMath = true;
            } else {
                this.showItemMatch = false;
                this.showAddOption = true;
                this.showOptionMath = false;
            }
        }
    }

    // 是否禁用
    // 没有匹配，下一步，完成禁用，
    // 匹配了，两个都是单选，下一步，有一个不是单选，完成
    checkDisabled(type: any) {
        const isSelect: boolean = ["6", "7"].includes(
            this.currentNode.valueKindId.toString()
        );
        if (type === "next") {
            if (!this.selectedList.length) {
                return false;
            } else {
                return !(
                    [6, 7].includes(this.selectedList[0].valueKindId) &&
                    isSelect
                );
            }
        } else {
            // 不是第一步，不禁用
            if (!this.showItemMatch) {
                return false;
            }
            if (this.selectedList.length) {
                return ([6, 7].includes(this.selectedList[0].valueKindId) && isSelect);
            } else {
                return true;
            }
        }
    }

    toAddOption() {
        this.showItemMatch = false;
        this.showAddOption = true;
        this.showOptionMath = false;
    }

    // 查询表单项名称
    async searchOptions() {
        if (!((this.typeIds && this.typeIds.length) || this.keyword)) {
            this.$message.error("查询表单项名称和分类不能同时为空!");
            return false;
        }
        const res = await this.$server["resource/formOptions/search"]({
            data: {
                name: this.keyword,
                typeIds: this.typeIds
            }
        });
        if (res.data.code === 200) {
            this.systemOptionList = res.data.data;
            (this.$refs.multipleTable as any).clearSelection();
            this.$nextTick(() => {
                const rows: any[] = [];

                this.systemOptionList.forEach((item: any) => {
                    const row = this.selectedList.filter((cur: any) => cur.labelId === item.labelId);
                    if (row.length) {
                        rows.push(item);
                    }
                });

                this.selectedList.forEach((item: any) => {
                    const index = this.systemOptionList.findIndex((cur: any) => cur.labelId !== item.labelId);
                    if (index !== -1) {
                        rows.push({
                            ...item,
                            name: item.name.split("-")[1]
                        });
                    }
                });

                rows.forEach((item: any) => {
                    (this.$refs.multipleTable as any).toggleRowSelection(item);
                });
            });
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 选中变化(多选的)
    changeSelect(val: any) {
        if ([6, 7].includes(this.currentNode.valueKindId)) return false;
        const list: any[] = [];
        val.forEach((item: any) => {
            if (list.findIndex((cur: any) => cur.labelId === item.labelId) === -1) {
                list.push({
                    ...item,
                    name: item.secondType + "/" + item.thirdType + "-" + item.name
                });
            }
        });

        this.selectedList = list;
    }

    // 选中变化(单选的)
    changeSelectRow(val: any, row: any) {
        if (![6, 7].includes(this.currentNode.valueKindId)) {
            this.changeSelect(val);
        } else {
            if (val.length === 1 || val.length === 0) {
                this.selectedList = val;
            } else if (val.includes(row)) {
                this.selectedList = [row];
                (this.$refs.multipleTable as any).clearSelection();
                (this.$refs.multipleTable as any).toggleRowSelection(row);
            }
        }
    }

    // 删除选中
    deleteItem(data: any) {
        const row = this.systemOptionList.filter((item: any) => item.labelId === data.labelId);
        if (row.length) {
            (this.$refs.multipleTable as any).toggleRowSelection(row[0], false);
        }
        const rowIndex = this.selectedList.findIndex((item: any) => item.labelId === data.labelId);
        if (rowIndex !== -1) {
            this.selectedList.splice(rowIndex, 1);
        }
    }

    // 提交表单
    async submitForm() {
        if (!this.showAddOption && this.selectedList.length) {
            const differentItem = this.selectedList.filter((item: any) => item.valueKindId !== this.currentNode.valueKindId);
            if (differentItem.length) {
                this.toTip(differentItem);
            } else {
                this.toSubmit();
            }
        } else {
            (this.$refs.addOption as any).submitForm(async(data: any) => {
                if (data) {
                    this.addItem = data;
                    const { name, type } = data;
                    if (Number(type) !== Number(this.currentNode.valueKindId)) {
                        this.toTip([{
                            valueKindId: Number(type),
                            name
                        }]);
                    } else {
                        this.toAddSubmit();
                    }
                } else {
                    return false;
                }
            });
        }
    }

    async toSubmit() {
        if (!(!this.showAddOption && this.selectedList.length)) {
            this.toAddSubmit();
            return false;
        }
        const data: any = {
            itemId: this.currentNode.id,
            labels: this.selectedList.map((item: any) => {
                return {
                    labelId: item.labelId
                };
            })
        };
        if (this.showOptionMath) {
            const tableData = (this.$refs.optionMath as any).checkTableData();
            if (tableData) data.labels[0].optionList = tableData;
        }
        const res = await this.$server["resource/formOptions/concat"]({
            data: data
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            this.closeDialog();
            this.getTable();
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
        this.showTip = false;
    }

    async toAddSubmit() {
        const { name, field, type, options, unit, label, isSearchShow, isDownShow } = this.addItem;
        const list: any = [];
        options.split(`\n`).forEach((item: any) => {
            if (!item.match(/^[ ]*$/)) {
                list.push(item);
            }
        });
        const _field = field.replace(/\s/g, "");
        const __field = _field.replace(/[`~!@#$%^&*()\-+=/\\|{[\]};':",.<>?，。、？；‘’“”【】｛｝！￥%…（）——]/g, "");
        const res = await this.$server["resource/formOptions/add"]({
            data: {
                itemId: this.currentNode.id,
                name: name,
                field: __field,
                optionList: list,
                unitId: unit,
                valueKindId: type,
                typeId: label[label.length - 1],
                isSearchShow: isSearchShow ? 0 : 1,
                isDownShow: isDownShow ? 0 : 1
            }
        });
        if (res.data.code === 200) {
            this.$message.success("操作成功!");
            this.closeDialog();
            this.getTable();
        } else {
            this.$message.error(
                res.data.message || "接口请求错误!"
            );
        }
        this.showTip = false;
    }

    toTip(list: any) {
        this.showTip = true;
        this.differentItem = list;
    }

    // 标记已处理
    markFinish() {
        this.$confirm(`${this.untreated ? "您当前有" + this.untreated + "条表单项未处理," : ""}是否确认标记当前表单为已处理`, "确认标记为已处理吗？")
            .then(async() => {
                const res = await this.$server["resource/formOptions/mark"]({
                    data: {
                        formId: this.$route.query.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("操作成功!");
                    this.goBack();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            }).catch();
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => this.$staticUrl + "/" + item);
        dialogPreviewImg({
            title: "预览图片",
            current: list
        });
    }

    // 视频预览
    previewVideo(file: any) {
        dialogPreviewVideoAudio({
            sourceUrl: this.$staticUrl + "/" + file[0]
        });
    }

    _close() {
        this.closeDialog();
    }

    goBack() {
        this.$router.back();
    }
}
</script>

<style scoped lang="scss">
::v-deep {
    .page-base-body {
        background: transparent !important;
    }
}
.isSingle {
    /deep/.el-table__header-wrapper {
        .el-checkbox {
            display: none;
        }
    }
}
::v-deep {
    .match-dialog {
        min-width: 600px;
        margin-top: 10vh!important;
        .el-dialog__body {
            padding-top: 0;
        }
    }
}
.match-content {
    .one {
        .line {
            width: 640px;
            height: 1px;
            border-bottom: 1px solid #d0d0d0;
            margin-left: -20px;
            margin-bottom: 20px;
            padding-bottom: 10px;
        }
        .show-data-btn {
            position: absolute;
            left: 0;
            top: 16px;
            color: #999;
        }
        .ten-data {
            @include flexLayout(flex, normal, normal);
            width: 100%;
            overflow-x: auto;
            max-height: 100px;
            .ten-data-item {
                border: 1px solid #d0d0d0;
                margin-right: 10px;
                padding: 6px 10px;
                font-size: 12px;
                & > div {
                    @include textEllipsis();
                }
            }
        }
        .tips {
            margin: 0 0 4px 0;
            line-height: 24px;
            font-size: 14px;
            color: #37383a;
        }
        .content {
            border: 1px solid #d0d0d0;
            border-radius: 2px;
            padding: 10px;
            .search {
                margin-bottom: 10px;
                @include flexLayout(flex, normal, center);
                p {
                    margin: 0;
                    width: 140px;
                }
                ::v-deep {
                    .el-input {
                        width: 160px;
                        margin-left: 10px;
                    }
                }
            }
        }
        .selected-box {
            border-radius: 4px;
            padding: 15px 0 24px;
            margin-bottom: 24px;
            .box-title {
                font-size: 14px;
                line-height: 24px;
                margin: 10px 0 4px 0;
                color: #37383a;
            }
            .select-border {
                border: 1px solid #d0d0d0;
                padding: 8px 10px;
                border-radius: 2px;
            }
        }
    }
    .btn-box {
        text-align: right;
        margin-top: 20px;
    }
}
.table-img {
    width: 100px;
    height: 70px;
    cursor: pointer;
    object-fit: contain;
}

.task-detail-header {
    padding: 10px 18px;
    .title p.description {
        font-size: 14px;
        max-width: 640px;
        @include textEllipsis();
    }
    .btn {
        font-size: 14px;
        color: #2c82c9;
        line-height: 22px;
        cursor: pointer;
        &:hover {
            text-decoration: underline;
        }
    }
}
.rich-dialog {
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 10px 20px;
            .titleName {
                font-size: 16px;
                padding: 0;
                margin: 0;
                margin-bottom: 10px;
            }
            .centent {
                max-height: 600px;
                overflow-y: auto;
            }
        }
    }
}
.pop-table {
    ::v-deep {
        .el-table__empty-block {
            border-bottom: 1px solid #EBEEF5;
        }
    }
}
.tip-content {
    p {
        font-size: 14px;
        line-height: 22px;
        margin: 0;
        span {
            color: #32A78F;
        }
    }
    div {
        margin: 22px 0;
        p {
            span {
                color: #de2728;
            }
        }
    }
}
</style>
